// 引入Count的UI组件
// import CountUI from "../../component/Count";
import React, { Component } from "react";
// 引入connent用于连接UI组件与redux
import { connect } from 'react-redux'
import { createIncrementAction, createDecrementAction, createIncrementAsyncAction } from '../../redux/count_action'

// 定义UI组件
class Count extends Component {

    state = {
      num: 0
    }

    increment = () => {
      this.props.Increment(Number(this.selectNumber.value))
    }
    decrement = () => {
      this.props.Decrement(Number(this.selectNumber.value))    
    }
    incrementIfOdd = () => {
        if (this.props.count%2 === 1) {
          this.props.Increment(Number(this.selectNumber.value))
        }
      }
    incrementAsync = () => {
      this.props.IncrementAsync(Number(this.selectNumber.value), 500)
    }

    render() {
        return (
            <div>
               <h2>当前求和为：{this.props.count}</h2>
               <div>
                   <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                   </select>
                   <button onClick={this.increment}>+</button>
                   <button onClick={this.decrement}>-</button>
                   <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>
                   <button onClick={this.incrementAsync}>异步加</button>
                </div>
            </div>
        )
    }
}


// // 映射状态
// const mapStateToProps = (state) => ({count: state})

// // 映射操作状态的方法
// const mapDispatchToProps = (dispatch) => ({
//     Increment: value => dispatch(createIncrementAction(value)),
//     Decrement: value => dispatch(createDecrementAction(value)),
//     IncrementAsync:  (value, time) => dispatch(createIncrementAsyncAction(value), time)
// })

// 一般写法
// const CountContainer = connect(
//     state => ({ count: state }),
//     dispatch => (
//         {
//             Increment: value => dispatch(createIncrementAction(value)),
//             Decrement: value => dispatch(createDecrementAction(value)),
//             IncrementAsync: (value, time) => dispatch(createIncrementAsyncAction(value), time)
//         }
//     ))(CountUI)

// 简写
const CountContainer = connect(
    state => ({ count: state }),
    {
        Increment: createIncrementAction,
        Decrement: createDecrementAction,
        IncrementAsync: createIncrementAsyncAction
    }
    )(Count)

export default CountContainer